<template>
  <Modal v-model:visible="visible" title="创建用户组" @cancel="close">
    <template #footer>
      <Button key="submit" type="primary" @click="submit">确认</Button>
      <Button key="back" @click="close">返回</Button>
    </template>
    <Form :model="formState" v-bind="formItemLayout" ref="formRef">
      <FormItem label="用户组名" name="name" :rules="[{ required: true, message: '请输入用户名' }]">
        <Input v-model:value="formState.name"></Input>
      </FormItem>
      <FormItem label="工单用户" name="userIdList" :rules="[{ required: true, message: '请选择用户组工单用户' }]">
        <Select v-model:value="formState.userIdList" mode="multiple" :options="userList"></Select>
      </FormItem>
      <FormItem label="描述" name="description">
        <Textarea v-model:value="formState.description"></Textarea>
      </FormItem>
    </Form>
  </Modal>
</template>
<script lang="ts" setup>
import { Modal, Form, FormItem, Input, message, Button, Select, Textarea } from 'ant-design-vue';
import { reactive, ref } from 'vue';
import { CreateUserGroupParams } from '/@/api/work-order/userManagement/userGroup/model/userGroupModel';
import { createUserGroup } from '/@/api/work-order/userManagement/userGroup/userGroup';
const visible = ref(false);
let formState = reactive({} as CreateUserGroupParams);
const formRef = ref();

const userList = ref();

// userList.value = await getGroupList();
const openCreate = async () => {
  userList.value = [
    { label: 'aaa', value: 123 },
    { label: 'bbb', value: 321 },
  ];
  visible.value = true;
};
const emit = defineEmits(['submitSuccess']);
const submit = async () => {
  let createParam = {
    description: formState.description,
    name: formState.name,
    userIdList: formState.userIdList,
  };
  formRef.value.validate().then(async () => {
    let res = await createUserGroup(createParam);
    if (res) {
      message.success('创建成功');
    }
    emit('submitSuccess');
  });
};
const close = () => {
  visible.value = false;
  formRef.value.clearValidate();
  formState = {} as CreateUserGroupParams;
};
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
};
defineExpose({ openCreate });
</script>
